<script setup lang="ts">
import { DataUri } from '@antv/x6';
import { onMounted, ref } from 'vue';
import useTwoJsDemo from './components/twojsDemo';
import useEchartDemo from './components/echartDemo';
import useAntvX6Demo from './components/antvx6Demo';

useTwoJsDemo();
useEchartDemo();
const { graph } = useAntvX6Demo();

function DumpSVG() {
  graph.value!.toSVG((dataUri: string) => {
    // 下载
    DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), 'chart.svg');
  });
}

const testRefEl = ref<null| HTMLElement>(null);

onMounted(() => {
  console.log(testRefEl);
});

</script>

<template>
  <n-layout class="h-screen">
    <n-layout-header class="h-16 bg-blue-800 text-white" style="-webkit-app-region: drag" bordered>
      <n-space class="h-16 my-0 mx-8" item-style="height:64px;">
        <div class="text-2xl py-3" >组件测试Demo</div>
      </n-space>
    </n-layout-header>
    <n-layout position="absolute"
              class="top-16 mt-2 bottom-0"
              :native-scrollbar="false"
              content-style="padding:0px 64px;">
      <n-layout-content :native-scrollbar="false">
        <n-grid cols="4" item-responsive responsive="screen">
          <n-gi span="4 m:2 xxl:1" class="mx-1 my-1">
            <n-card class="h-96 lg:h-128">
              <div id="twojs" class="bg-black"></div>
            </n-card>
          </n-gi>
          <n-gi span="4 m:2 xxl:1" class="mx-1 my-1">
            <n-card class="h-96 lg:h-128">
              <div id="drawEchart" class="h-full"></div>
            </n-card>
          </n-gi>
          <n-gi span="4 m:2 xxl:1" class="mx-1 my-1">
            <n-card class="h-96 lg:h-128">
              <div id="antvx6" class="h-full" ref="testRefEl"></div>
              <n-button @click="DumpSVG">导出</n-button>
            </n-card>
          </n-gi>
        </n-grid>

      </n-layout-content>
    </n-layout>

  </n-layout>
</template>

<style scoped>

</style>
